<template>
  <!--  @click="goAllList()" 去掉点击 -->
  <div class="mapWrap " ref="wrap"  v-if="softName == ''">
    <div ref="bohai" class="bohai refWrap hovers sunlight" @click.stop="goList('渤海湾港')">
      <div class="headWrap AlibabaPuHuiTi">
        <span class="title">渤海湾港</span>
        <span class="number">{{ numberFormater(dataObj.bohai) }}</span>
      </div>
      <div class="image1" :class="{ isActive: isActiveArr.includes('bohai') }"></div>
    </div>
    <div ref="bankuai" class="bankuai refWrap hovers sunlight" @click.stop="goList('板块集团')">
      <div class="headWrap AlibabaPuHuiTi">
        <span class="title">板块集团</span>
        <span class="number">{{ numberFormater(dataObj.bankuai) }}</span>
      </div>
      <div class="image2" :class="{ isActive: isActiveArr.includes('bankuai') }"></div>
    </div>
    <div ref="rizhao" class="rizhao refWrap hovers sunlight" @click.stop="goList('日照港')">
      <div class="headWrap AlibabaPuHuiTi">
        <span class="title">日照港</span>
        <span class="number">{{ numberFormater(dataObj.rizhao) }}</span>
      </div>
      <div class="image1" :class="{ isActive: isActiveArr.includes('rizhao') }"></div>
    </div>
    <div ref="yantai" class="yantai refWrap hovers sunlight" @click.stop="goList('烟台港')">
      <div class="headWrap AlibabaPuHuiTi">
        <span class="title">烟台港</span>
        <span class="number">{{ numberFormater(dataObj.yantai) }}</span>
      </div>
      <div class="image1" :class="{ isActive: isActiveArr.includes('yantai') }"></div>
    </div>
    <div ref="qingdao" class="qingdao refWrap hovers sunlight" @click.stop="goList('青岛港')">
      <div class="headWrap AlibabaPuHuiTi">
        <span class="title">青岛港</span>
        <span class="number">{{ numberFormater(dataObj.qingdao) }}</span>
      </div>
      <div class="image1" :class="{ isActive: isActiveArr.includes('qingdao') }"></div>
    </div>
    <!-- 弹窗 -->
    <div ref="leftRef" class="showInfo" :class="isLevel" @click.stop
      v-if="Array.isArray(Object.keys(flow)) && Object.keys(flow).length > 0 && isDialog">
      <div class="content">
        <div class="head">
          <div class="headLogo"></div>
          <span class="title AlibabaPuHuiTi">{{ flow.bizAction }}</span>
        </div>
        <div class="contentItem AlibabaPuHuiTi">
          <a-row :gutter="[8, 16]">
            <a-col class="fontTitle" :span="24" style="padding: 4px 16px">
              <div class="leftName">作业名称:</div>
              <a-tooltip :title="flow.titleType">
                <div class="rightInfo" style="color: rgba(0, 178, 255, 1)">
                  {{ flow.titleType }}
                </div>
              </a-tooltip>
            </a-col>
            <a-col class="fontTitle" :span="24">
              <div class="leftName">发起单位:</div>
              <div class="rightInfo">{{ flow.originatorDeptName }}</div>
            </a-col>
            <a-col class="fontTitle" :span="24">
              <div class="leftName">发起时间:</div>
              <div class="rightInfo">{{ flow.bizData }}</div>
            </a-col>
            <a-col class="fontTitle" :span="24">
              <div class="leftName">发起人:</div>
              <div class="rightInfo">{{ flow.userName }}</div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <!-- 画线 去掉画线-->
    <div class="noHovers" v-if="Array.isArray(lineArray) && lineArray.length > 0 && false" @click.stop>
      <CanvasLine :lineArray="lineArray" :width="canvasSetting.width" :height="canvasSetting.height"></CanvasLine>
    </div>

    <!-- 板块集团连线样式 -->
    <div ref="newBankuai" class="newBankuai noHovers" v-if="false" @click.stop>
      <div class="item"></div>
    </div>
    <!-- 画线 去掉画线-->
    <div class="noHovers" v-if="Array.isArray(showLineArray) && showLineArray.length > 0 && false" @click.stop>
      <CanvasLine :lineArray="showLineArray" :width="canvasSetting.width" :height="canvasSetting.height"
        :setting="{ width: 2, color: '#ffffff' }">
      </CanvasLine>
    </div>
    <div ref="mapInfo" class="showInfos AlibabaPuHuiTi noHovers" @click="infoLine('newBankuai', 'mapInfo')" v-if="false"
      @click.stop>
      <span>板块集团</span>
      <span>{{ numberFormater(dataObj.bankuai) }}</span>
    </div>
  </div>
  <div v-else-if="softName == '日照港'" class="iframeWrap">
    <iframe class="iframeWrap-iframe" id="contenIframe" src="http://172.18.18.2:8042/">
    </iframe>
  </div>
</template>
<script>
import CanvasLine from "./components/canvasLine.vue";

let conversion = {
  青岛港: "qingdao",
  日照港: "rizhao",
  烟台港: "yantai",
  渤海湾港: "bohai",
  板块集团: "bankuai",
};
import { onResizeChang } from "@/common/js/common.js";
export default {
  name: "ZSMap",
  components: { CanvasLine },
  props: {
    isDialog: {
      type: Boolean,
      default: true,
    },
    softName: {
      type: [String, Number],
      default: '',
    }
  },
  data() {
    return {
      dataObj: {
        qingdao: 0,
        rizhao: 0,
        bohai: 0,
        bankuai: 0,
        yantai: 0,
      },
      isActiveArr: [],
      // 展示的流程
      flow: {},
      dataList: [],
      setTimeName: null,
      setTimeName2: null,
      setTimeName1: null,
      // 提示信息
      setTimeName3: null,
      setTimeName4: null,
      isLevel: "",
      oldId: "1",
      lineArray: [],
      canvasSetting: {
        width: 0,
        height: 0,
      },
      timeOutName: null,
      timeOutName1: null,
      // 板块集团的连线
      showLineArray: [],
    };
  },
  methods: {
    // 屏幕大小修改时
    onResize() {
      if (Object.keys(this.flow).length > 0) {
        this.canvasLine(this.flow.bizAction);
      }
    },
    infoLine(startRefString, endRefString) {
      let startRef = this.$refs[startRefString];
      let endRef = this.$refs[endRefString];
      let wrap = this.$refs.wrap.getBoundingClientRect();
      if (!startRef || !endRef) {
        return;
      }
      // 画布大小
      this.canvasSetting = {
        width: wrap.width,
        height: wrap.height,
      };
      let startPosition = startRef.getBoundingClientRect();
      let endPostition = endRef.getBoundingClientRect();
      let endObj = {
        x: endPostition.left - wrap.left,
        y: endPostition.top - wrap.top + endPostition.height / 2,
      };
      let lineArr = [
        {
          source: {
            x: startPosition.left - wrap.left + startPosition.width / 2,
            y: startPosition.top - wrap.top + startPosition.height / 2,
          },
          target: {
            x: startPosition.left - wrap.left + startPosition.width / 2 + 20,
            y: endObj.y,
          },
        },
        {
          source: {
            x: startPosition.left - wrap.left + startPosition.width / 2 + 20,
            y: endObj.y,
          },
          target: {
            x: endObj.x,
            y: endObj.y + 0.01,
          },
        },
      ];
      // console.log('lineArr==', lineArr);
      // console.log('endRef==', endRef);
      this.showLineArray = lineArr;
    },
    canvasLine(refString) {
      let endRef = this.$refs[conversion[refString]];
      let startRef = this.$refs.leftRef;
      // 获取
      if (!refString || !endRef || !startRef) {
        return;
      }
      let wrap = this.$refs.wrap.getBoundingClientRect();
      let startPosition = startRef.getBoundingClientRect();
      // 画布大小
      this.canvasSetting = {
        width: wrap.width,
        height: wrap.height,
      };
      let endPosition = endRef.getBoundingClientRect();
      // start 开始点
      let lineA = [
        {
          // 弹窗位置
          source: {
            x: startPosition.left - wrap.left + startPosition.width - 10,
            y: startPosition.top - wrap.top + startPosition.height / 2,
          },
          target: {
            x: startPosition.left - wrap.left + startPosition.width + 30,
            y: startPosition.top - wrap.top + startPosition.height / 2 - 0.01,
          },
        },
        {
          // 弹窗位置
          source: {
            x: startPosition.left - wrap.left + startPosition.width + 30,
            y: startPosition.top - wrap.top + startPosition.height / 2 - 0.01,
          },
          target: {
            x: endPosition.left - wrap.left + endPosition.width / 2,
            y: endPosition.top - wrap.top + (endPosition.height - 20),
          },
        },
      ];
      this.lineArray = lineA;
    },
    // 板块集团的标注

    numberFormater(num) {
      return Number(num || 0).toLocaleString();
    },
    dataForma(arr) {
      let newObj = {};
      arr.filter((val) => {
        newObj[conversion[val.name]] = val.num;
      });
      return newObj;
    },
    // 定时器
    start() {
      // this.end("timeName2");
      // this.timeName2 = setInterval(() => {
      //   this.getDgetFourGroup();
      // }, 3600000);

      // this.end("setTimeName");
      // this.setTimeName = setInterval(() => {
      //   this.getDgetFourProtLight();
      //   // 请求新数据
      // }, 10000);
    },
    end(timeNames) {
      if (timeNames) {
        clearInterval(this[timeNames]);
        this[timeNames] = null;
      } else {
        clearInterval(this.setTimeName);
        clearInterval(this.setTimeName1);
        clearInterval(this.setTimeName2);
        clearInterval(this.setTimeName3);
        clearInterval(this.setTimeName4);
        this.setTimeName = null;
        this.setTimeName1 = null;
        this.setTimeName2 = null;
        this.setTimeName3 = null;
        this.setTimeName4 = null;
      }
    },
    // 获取数据 弃用
    getDgetFourGroup() {
      this.getAxios(this.$getflowfor4groupday, {})
        .then((res) => {
          if (res.code == 200) {
            this.dataList = [...this.dataList, ...res.data];
            this.dataObj = {
              ...this.dataObj,
              ...this.dataForma(res.data),
            };
          }
        })
        .finally(() => {
          this.start();
        });
    },
    // 获取新的 弃用
    getDgetFourProtLight() {
      return;
      let obj = {
        青岛港: "qingdao",
        日照港: "rizhao",
        烟台港: "yantai",
        渤海湾港: "bohai",
        板块集团: "bankuai",
      };
      let dList = this.dataList.map((val) => {
        return {
          name: val.name,
          num: this.dataObj[obj[val.name]],
        };
      });
      let params = {
        dataList: dList,
      };
      this.postAxios(this.$get4protlight, params)
        .then((res) => {
          if (res.code == 200) {
            let backList = res.data;
            let newObj = this.dataObj;
            let isBoolean = false;
            backList = backList.filter((val) => {
              if (Number(val.num) > 0) {
                this.isActiveArr.push(obj[val.name]);
                if (Number(val.num) != 0) {
                  isBoolean = true;
                }
                newObj[obj[val.name]] = Number(newObj[obj[val.name]]) + Number(val.num);
              }
            });
            // 如果又新的数据就将合并的接口刷新一下
            if (isBoolean) {
              this.$bus.$emit("onRefresh", { type: "data", id: "" });
            }
            this.dataObj = {
              ...this.dataObj,
              ...newObj,
            };
            this.$bus.$emit("onRefresh", { type: "map", id: "" });
            setTimeout(() => {
              this.isActiveArr = [];
            }, 4000);
          }
        })
        .catch(() => {
          this.end("setTimeName");
        })
        .finally(() => { });
    },
    // 获取地图中数据 新接口
    getMapData() {
      let obj = {
        青岛港: "qingdao",
        日照港: "rizhao",
        烟台港: "yantai",
        渤海湾港: "bohai",
        板块集团: "bankuai",
      };
      let dList = this.dataList.map((val) => {
        return {
          name: val.name,
          num: this.dataObj[obj[val.name]],
        };
      });
      let params = {
        dataList: dList,
      };
      return
      this.postAxios(this.$wlrzriskControlCenter, params)
        .then((res) => {
          if (res.code == 200) {
            let backList = res.data;

            let newObj = this.dataObj;
            let isBoolean = false;
            this.dataList = backList;
            backList = backList.filter((val) => {
              if (Number(val.num) > 0 && params.dataList.length != 0) {
                this.isActiveArr.push(obj[val.name]);
                newObj[obj[val.name]] = Number(newObj[obj[val.name]]) + Number(val.num);
                if (Number(val.num) != 0) {
                  isBoolean = true;
                }
              }
            });

            // 如果又新的数据就将合并的接口刷新一下
            if (isBoolean) {
              this.$bus.$emit("onRefresh", { type: "data", id: "" });
            }
            this.dataObj = {
              ...this.dataObj,
              ...newObj,
            };
            this.$bus.$emit("onRefresh", { type: "map", id: "" });
            setTimeout(() => {
              this.isActiveArr = [];
            }, 4000);
          }
        })
        .catch(() => {
          this.end("setTimeName");
        })
        .finally(() => { });
    },
    // 获取板块集团 弃用
    getbkjtnum() {
      return
      this.getAxios(this.$getbkjtnum, {})
        .then((res) => {
          if (res.code == 200) {
            let list = res.data;
            this.dataList = [...this.dataList, ...list];
            this.dataObj = {
              ...this.dataObj,
              ...this.dataForma(list),
            };
          }
        })
        .finally(() => { });
    },
    getPlateTime() {
      return
      // this.end("setTimeName1");
      // this.setTimeName1 = setTimeout(() => {
      //   this.getbkjtnum();
      // }, 10000);
    },
    getStartInfo() {
      this.setTimeName4 = setInterval(() => {
        if (this.setTimeName4 != null) {
          this.getShowInfo();
        }
      }, 20000);
    },
    // 获取弹框信息
    getShowInfo() {
      let id = this.oldId || 1;
      this.getAxios(this.$wlrzriskControlNewFlow, { id: id })
        .then((res) => {
          if (res.code == 200) {
            let list = res.data;
            if (list.length > 0) {
              if (this.oldId != list[list.length - 1].id) {
                this.oldId = list[list.length - 1].id || "1";
                this.$bus.$emit("onRefresh", { type: "map", id: list[list.length - 1].id || "" });
                this.getMapData();
              }
              // 存在
              if (Object.keys(this.flow).length > 0) {
                this.isLevel = "out";
                // 连线
                this.lineArray = [];
                setTimeout(() => {
                  this.isLevel = "in";
                  this.flow = list[list.length - 1];
                  // 去掉连线
                  setTimeout(() => {
                    this.$nextTick(() => {
                      this.canvasLine(this.flow.bizAction);
                    });
                  }, 2000);
                }, 2000);
              } else {
                this.isLevel = "in";
                this.flow = list[list.length - 1];
                setTimeout(() => {
                  this.$nextTick(() => {
                    this.canvasLine(this.flow.bizAction);
                  });
                }, 2000);
                this.end("timeOutName");
                this.timeOutName = null;
                // 宗主任让一直显示
                // this.timeOutName = setTimeout(() => {
                //     this.isLevel = 'out';
                //     // 连线
                //     this.lineArray = [];
                //     setTimeout(() => {
                //         this.flow = {};
                //     }, 1500)
                // }, 120000)
              }
            }
          }
        })
        .finally(() => {
          //   if (this.timeOutName1 != null) {
          //     this.end("timeOutName1");
          //     this.timeOutName1 = null;
          //     this.timeOutName1 = setInterval(() => {
          //       this.getShowInfo();
          //       console.log("this.timeOutName1==", this.timeOutName1);
          //     }, 1000);
          //   }
        });
    },
    // 跳转页面
    goList(Str) {
      this.$router.push({ path: "/onePort", query: { port: Str } });
      // 板块集团和四大港口都跳转到同一个页面
      // if (Str == '板块集团') {
      //     this.$router.push({ path: "/oneType", query: { type: Str } });
      // } else {
      //     this.$router.push({ path: "/onePort", query: { port: Str } });
      // }
    },
    goAllList() {
      this.$router.push({ path: "/port" });
    },
  },
  created() {
    onResizeChang("start", this.onResize);
  },
  destroyed() {
    onResizeChang("end");
    this.end();
    setTimeout(() => {
      this.end();
    }, 60000)
  },
  mounted() {
    // this.getDgetFourGroup();
    this.getMapData();
    // this.getbkjtnum();
    setTimeout(() => {
      this.getShowInfo();
      this.getStartInfo();
    }, 1000);
  },
};
</script>
<style lang="less" scoped>
.AlibabaPuHuiTi {
  font-family: AlibabaPuHuiTi;
}

.mapWrap {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(~@/assets/images/screen/mapBk.png);
  background-size: 100% 100%;
  // cursor: default;

  .refWrap {
    width: 80px;
    height: 110px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  // 渤海港湾
  .bohai {
    // top: 4vh;
    top: calc(14vh - 110px);
    right: 16vw;
  }

  // 日照港
  .rizhao {
    bottom: 14vh;
    right: 15.6vw;
  }

  // 板块集团
  .bankuai {
    bottom: 26vh;
    right: 11.5vw;
  }

  // 青岛港
  .qingdao {
    bottom: 21vh;
    right: 9vw;
  }

  // 烟台
  .yantai {
    // top: 7vh;
    top: calc(16vh - 110px);
    right: 6vw;
  }

  .headWrap {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      margin-bottom: -10px;
    }
  }

  .image1 {
    width: 61px;
    height: 70px;
    background-image: url(~@/assets/images/screen/mapDoc.png);
    background-size: 100% 100%;
  }

  .image2 {
    width: 61px;
    height: 70px;
    background-image: url(~@/assets/images/screen/mapDocAct.png);
    background-size: 100% 100%;
  }

  // 激活样式
  .isActive {
    animation: wave-effect 1s infinite;
  }

  @keyframes wave-effect {
    0% {
      transform: translate(0, 0) scale(1);
    }

    80% {
      transform: translate(0, 0) scale(1.2);
    }

    90% {
      transform: translate(0, 0) scale(1.1);
    }

    100% {
      transform: translate(0, 0) scale(1);
    }
  }

  // 弹窗样式

  .showInfo {
    position: absolute;
    z-index: 1;
    top: 24%;
    left: 2vw;
    color: #ffffff;
    width: 300px;
    height: 210px;
    font-size: 16px;
    background-image: url(~@/assets/images/screen/toolBk.png);
    background-size: 100% 100%;
    // pointer-events: none;
    cursor: default;

    &::after {
      content: "";
      position: absolute;
      top: 0px;
      left: 0px;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      background-image: url(~@/assets/images/screen/showTooltip.png);
      background-size: 100% 100%;
      pointer-events: none;
    }

    .content {
      .head {
        height: 40px;
        display: flex;
        align-items: center;

        .headLogo {
          width: 44px;
          height: 40px;
          margin-top: 1px;
          margin-left: 1px;
          background-image: url(~@/assets/images/screen/tooltipHead.png);
          background-size: 100% 100%;
          margin-right: 14px;
        }

        .title {
          font-size: 20px;
          font-weight: 600;
          z-index: 1;
        }
      }

      .contentItem {
        padding: 16px;
        // background: rgba(0, 0, 0, 0.6);
        // padding-bottom: 12px;
      }
    }

    .fontTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background-color: #132f47;
      margin: 3px 0px;

      padding: 2px 4px !important;

      .leftName {
        width: 70px;
        font-weight: 500;
        font-size: 16px;
        flex-shrink: 0;
      }

      .rightInfo {
        width: 100%;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 18px;
        font-weight: 400;
        color: rgba(219, 231, 238, 1);

        // overflow: hidden;
        // text-overflow: ellipsis;
        // display: -webkit-box;
        // // 控制行数
        // -webkit-line-clamp: 1;
        // -webkit-box-orient: vertical;
      }
    }
  }

  .in {
    animation: fadeIn 2s ease-in-out forwards;
  }

  .out {
    animation: fadeOut 2s ease-in-out forwards;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
      top: 0px;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      top: 0px;
    }
  }
}

// 板块集团新样式
.newBankuai {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 22vh;
  right: 12.5vw;
  border-radius: 50%;
  background-color: #0441f5;
}

.showInfos {
  position: absolute;
  bottom: 10vh;
  right: 2vw;
  width: 100px;
  height: 60px;
  border-radius: 10px;
  box-shadow: 0px 0px 4px 1px #999999;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  // background-color: pink;
}

.iframeWrap {
  width: 100%;
  height: 100%;

  &-iframe {
    width: 100%;
    height: 100%;
  }
}
.sunlight{
  display: none !important;
}
</style>
